<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"> 

<h:head>
       
    <title> Shopping Cart</title>
    <style>
    	.tabheader{
    		background-color: #052D6E;
		    background-position: left top;
		    border-bottom: 1px solid #C0C0C0;
		    border-right: 1px solid #C0C0C0;
		    font-family: Arial,Verdana,sans-serif;
		    font-size: 13px;
		    font-weight: bold;
		    padding: 4px;
		    text-align: center;
		    height: 25px;
		    color: #FFFFFF;
    	
    	}
    	.tabrow1{
    		background-color: #D6E6FB;
		    background-position: left top;
		    border-bottom: 1px solid #C0C0C0;
		    border-right: 1px solid #C0C0C0;
		    font-family: Arial,Verdana,sans-serif;
		    font-size: 11px;
		    font-weight: bold;
		    padding: 4px;
		    text-align: center;
		    height: 25px;
		    
    	}
    	.tabrow2{
    		background-color: #E9EBED;
		    background-position: left top;
		    border-bottom: 1px solid #C0C0C0;
		    border-right: 1px solid #C0C0C0;
		    font-family: Arial,Verdana,sans-serif;
		    font-size: 11px;
		    font-weight: bold;
		    padding: 4px;
		    text-align: center;
		    height: 25px;
    	}
    	.rf-dt {
		    background-color: #FFFFFF;
		    border-collapse: collapse;
		    border-color: #C0C0C0;
		    border-style: solid;
		    border-width: 1px;
		    empty-cells: show;
		   	width : 100%;
		}
    	
    	.txarea{
    		background-color: #FFFFFF;
		    border: 1px solid #052D6E;
		    color: #000000;
		    padding: 3px;
		    border-radius: 0px 7px 7px 7px;
		    -webkit-border-radius:0px 7px 7px 7px;
			-moz-border-radius:0px 7px 7px 7px;
		    
		}
		.txbox{
    		background-color: #FFFFFF;
		    border: 1px solid #052D6E;
		    color: #000000;
		   
		}
		.txbox2{
    		background-color: #FFFFFF;
		    border: 1px solid #052D6E;
		    color: #000000;
		   
		}
		
		.button {
		    background-color: #FFAA00;
		    background-position: left top;
		    background-repeat: repeat-x;
		    border-color: #2A4480;
		    border-width: 1px;
		    color: #FFFFFF;
		    font-family: Arial,Verdana,sans-serif;
		    font-size: 12px;
		    font-weight: bold;
		    text-align: top;
		}
		
		.selbox {
		    border-color: #052D6E;
		    border-style: solid;
		    border-width: 1px;
		    display: inline-block;
		    font-size: 10px;
		    height: 20px;
		    white-space: nowrap;
		}
		.txt{
			font-family: Arial,Verdana,sans-serif;
		    font-size: 11px;
		    font-weight: bold;
		}
		.col1{
			text-align: left;
		}
		.col1{
			text-align: right;
		}
    </style>
</h:head> 
<body> 
<f:view>

<h:panelGrid columns="2" style="margin-bottom:10px; " cellpadding="5" width="100%" border="0" columnClasses="col2, col1"> 
	<h:commandButton value="Apply" action="#{itemBean.update}" styleClass="button">
			<f:ajax render=":form2:tab :form1:rowSel" execute="@all" ></f:ajax>
		</h:commandButton>
	<h:form id="form1">
	<h:outputText value="No. of Rows : " styleClass="txt"></h:outputText>
	<h:selectOneMenu id="rowSel" value="#{itemBean.num}" styleClass="selbox">
		<f:selectItem itemLabel="Add Row" itemValue="0" />  
         <f:selectItem itemLabel="5" itemValue="5" />  
         <f:selectItem itemLabel="10" itemValue="10" />  
         <f:selectItem itemLabel="15" itemValue="15" />  
         <f:ajax event="change" execute="@this" render=":form2:tab" listener="#{itemBean.rowgen(itemBean.num)}"> </f:ajax>
	</h:selectOneMenu>
	</h:form>
</h:panelGrid>



<h:form id="form2">
<h:panelGrid columns="1" width="100%">


		

<h:dataTable headerClass="tabheader" id="tab" var="itm" styleClass="rf-dt" 
			 value="#{itemBean.dispList}" 
			 rowClasses="tabrow2, tabrow1">
	
	<h:column >
		<f:facet name="header">  
             <h:outputText value="Item" />  
        </f:facet> 
        <h:outputText value="#{itm.itemId}" size="3"  />
	</h:column>
	
	<h:column>
		<f:facet name="header">  
                 <h:outputText value="Product" />  
            </f:facet> 
                <h:inputText value="#{itm.product}" size="25" styleClass="txbox"/>
	</h:column>
	<h:column>
		<f:facet name="header">  
                 <h:outputText value="Description" />  
            </f:facet> 
                <h:inputTextarea value="#{itm.itemDesc}" styleClass="txarea" />
	</h:column>
	<h:column>
	<f:facet name="header">  
                 <h:outputText value="Quantity" />  
            </f:facet> 
            <h:inputText value="#{itm.itemQty}" size="4" styleClass="txbox2"/>
	</h:column>
	<h:column>
		<f:facet name="header">  
                 <h:outputText value="Est Ship Date" />  
            </f:facet> 
	</h:column>
	<h:column>
		<f:facet name="header">  
                 <h:outputText value="Unit Price" />  
            </f:facet> 
	</h:column>
	<h:column>
		<f:facet name="header">  
                 <h:outputText value="List Price" />  
            </f:facet> 
	</h:column>
	<h:column>
		 <f:facet name="header">  
                 <h:outputText value="Total Price" />  
            </f:facet>
	</h:column>
	<h:column>
		<f:facet name="header">  
             	<h:outputText value="Action" />  
            </f:facet>
            <h:button value="X" styleClass="button" >
            	<f:ajax event="click" execute="@this" render=":form2:tab" listener="#{itemBean.deleteItm(itm)}"> </f:ajax>
            </h:button>
	</h:column>
</h:dataTable>
  </h:panelGrid>
</h:form>
      
 </f:view>            


    
</body> 
</html>